<template>
  <div class="de-login">
    <div class="de-login-right">
      <div class="de-login-box">
        <div class="de-login-logo">
          <!-- <img src="/images/login/logo.png" alt="" /> -->
          <h2 style="text-align: center">注册</h2>
        </div>
        <div class="de-login-form">
          <div class="de-login-item">
            <div class="de-login-label">用户名</div>
            <input
              v-model="loginForm.username"
              class="de-login-input"
              type="text"
              placeholder="请输入用户名"
              @keyup.enter="login"
            >
          </div>
          <div class="de-login-item">
            <div class="de-login-label">密码</div>
            <input
              v-model="loginForm.password"
              class="de-login-input"
              type="password"
              placeholder="请输入密码"
              @keyup.enter="login"
            >
          </div>
          <div class="de-login-item">
            <div class="de-login-label">确认密码</div>
            <input
              v-model="loginForm.fpassword"
              class="de-login-input"
              type="password"
              placeholder="请确认密码"
              @keyup.enter="login"
            >
          </div>
          <div class="de-login-item">
            <button class="de-login-btn" @click="login">注册</button>
          </div>
          <div class="de-phone-login">手机快速登录</div>
        </div>

        <div class="de-register">
          <span>已有账号！</span>
          <router-link to="/login">立即登录 &gt; </router-link>
        </div>
      </div>
    </div>
    <div class="de-login-left">
      <img :src="bgImg" alt="">
      <div class="de-login-left-info">
        <!-- <h4>基于<span>船舶产业资源</span>而搭建的</h4> -->
        <h2>影院购票管理系统</h2>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      bgImg: require('@/icons/image/bg.png'),
      loginForm: {
        username: '',
        password: '',
        nickname: '',
        avatar: '',
        role: 'user',
        fpassword: '',
        date: new Date()
      },
      allAccount: []
    }
  },
  watch: {
    // loginForm: {
    //   handler(val) {
    //     this.loginForm.nickname = val.username
    //   },
    //   deep: true
    // }
  },
  async created() {
    const allAccount = await this.$localStorage.getItem('allAccount')
    if (allAccount) {
      this.allAccount = allAccount
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    async login() {
      if (
        !this.loginForm.username ||
        !this.loginForm.password ||
        !this.loginForm.fpassword
      ) {
        return this.$message({
          message: '用户名密码不能为空',
          type: 'error'
        })
      } else if (this.loginForm.password !== this.loginForm.fpassword) {
        return this.$message({
          message: '两次密码不一致，请检查！',
          type: 'error'
        })
      }
      const allAccount = this.allAccount
      const isExist = allAccount.find(
        (item) => item.username === this.loginForm.username
      )

      if (isExist) return this.$message.error('该用户已存在')

      const num = Math.ceil(Math.random() * 13)
      this.loginForm.nickname = this.loginForm.username
      this.loginForm.avatar = require('@/icons/image/yyjcp-' + num + '.png')
      allAccount.push(this.loginForm)
      await this.$localStorage.setItem(
        'allAccount',
        allAccount
      )
      this.loginForm = {
        username: '',
        password: '',
        nickname: '',
        avatar: '',
        role: 'user',
        fpassword: '',
        date: new Date()
      }
      this.$message({
        message: '注册成功，即将跳转到登录页！',
        type: 'success'
      })
      setTimeout(() => {
        this.$router.push('/login')
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.de-login {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.de-login-left {
  position: relative;
  flex: 1;
}

.de-login-left img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.de-login-left-info {
  position: absolute;
  top: 50%;
  right: 138px;
  text-align: right;
  transform: translateY(-50%);
}

.de-login-left-info h4 {
  font-size: 40px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.de-login-left-info h4 span {
  color: rgba(255, 235, 59, 1);
}

.de-login-left-info h2 {
  font-size: 60px;
  font-weight: 900;
  color: transparent;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 11.81%,
    rgba(129, 184, 247, 1) 83.33%
  );
  -webkit-background-clip: text;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-top: 30px;
}

.de-login-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 644px;
  padding: 0 calc(120 / 1920 * 100vw);
  background: rgba(255, 255, 255, 1);
}

.de-login-box {
  width: 100%;
}

.de-login-form {
  padding-top: 34px;
}

.de-login-item {
  margin-bottom: 20px;
}

.de-login-label {
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 10px;
}

.de-login-input {
  width: 100%;
  height: 52px;
  padding: 0 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(227, 227, 227, 1);
  outline: none;
}

.de-login-btn {
  font-size: 20px;
  width: 100%;
  height: 52px;
  line-height: 52px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  background-color: rgba(0, 70, 145, 1);
  cursor: pointer;
  border: none;
}

.de-login-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.de-login-tip .rememberMe label {
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

.forgot-pwd {
  color: rgba(0, 70, 145, 1);
}

.de-phone-login {
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
}

.de-register {
  display: flex;
  justify-content: flex-end;
}

.de-register {
  font-size: 16px;
  margin-top: calc(160 / 1920 * 100vw);
}

.de-register a {
  color: rgba(0, 70, 145, 1);
}

.custom-checkbox {
  position: relative;
  z-index: -1;
  opacity: 0;
}

.custom-checkbox + label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.custom-checkbox + label::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #c3c3c3;
  border-radius: 0.25em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.custom-checkbox:checked + label::before {
  border-color: rgba(0, 70, 145, 1);
  background-color: rgba(0, 70, 145, 1);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
</style>
